<!--目录按钮-->
<template>
  <div>
    <a class="catalogBtn" @click="show()">
      <slot name="catelogBtn"></slot>
    </a>
    <transition name="catalogReturn" enter-active-class="animated slideInLeft" leave-active-class="animated slideOutLeft">
      <div class="catalogCon" v-if="showCatalog">
        <div class="catalog_header">
          <p @click="close()" class="catalog_h_return"></p>
          <p class="catalog_h_title">目录</p>
        </div>
        <div>目录的所有信息</div>
      </div>
    </transition>
  </div>

</template>

<script>
  export default {
    props: ['BookId'],
    data () {
      return {
        msg: 'Welcome to Your Vue.js App',
        showCatalog: false
      }
    },
    methods: {
      show: function () {
        console.log(this.BookId)
        this.showCatalog = true
        //  请求id为BookId的书籍的目录数据，*/
      },
      close: function () {
        this.showCatalog = false
      }
    }
  }
</script>


<style scoped>

.catalogCon{
  position: absolute;
  top:0;
  left: 50%;
  margin-left: -160px;
  min-height:516px;
  width: 320px;
  z-index: 999999;
background: #fff;
}
  .catalog_header{
    height: 52px;
    background: #f1f1f3;
    border-bottom: 1px solid #ececec;
  }
  .catalog_h_return{
    display: inline-block;
    width: 73.5px;
    height: 52px;
    float: left;
    background: url(/static/img/arr_left.png) no-repeat 18px center;
    background-size: 7.2px 14.4px;
  }
  .catalog_h_title{
    display: inline-block;
    width: 173px;
    height: 52px;
    line-height: 52px;
    text-align: center;
    font-size: 18px;
    color: #000;
    float: left;
  }
</style>
